<script lang="ts" setup>
import { h, ref } from 'vue';

import {
  DeleteOutlined,
  ScheduleOutlined,
  SettingOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import UserClientRelation from '#/views/system/component/UserClientRelation.vue';
import UserConfig from '#/views/system/component/UserConfig.vue';
import UserRoleRelation from '#/views/system/component/UserRoleRelation.vue';

const clientRelationVisible = ref<Boolean>(false);
const roleRelationVisible = ref<Boolean>(false);
const configVisible = ref<Boolean>(false);
const params = ref({
  keyword: '',
});

const dataSource = ref([
  {
    id: '123456',
    userName: '18768172795',
    realName: '客户名称',
    roleId: '1',
    roleName: '超级管理员',
    userTel: '18768172795',
    email: '458761272@qq.com',
    lastLoginTime: '2025-08-15 15:31:24',
  },
  {
    id: '123457',
    userName: '18768172795',
    realName: '客户名称',
    roleId: '2',
    roleName: '超级管理员',
    userTel: '18768172795',
    email: '458761272@qq.com',
    lastLoginTime: '2025-08-15 15:31:24',
  },
]);
const columns = ref([
  {
    title: '用户账号',
    dataIndex: 'userName',
    key: 'userName',
    width: 120,
    align: 'center',
  },
  {
    title: '用户名称',
    dataIndex: 'realName',
    key: 'realName',
    width: 120,
    align: 'center',
  },
  {
    title: '用户角色',
    dataIndex: 'roleName',
    key: 'roleName',
    width: 120,
    align: 'center',
  },
  {
    title: '联系方式',
    dataIndex: 'userTel',
    key: 'userTel',
    width: 100,
    align: 'center',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 100,
    align: 'center',
  },
  {
    title: '最近登录时间',
    dataIndex: 'lastLoginTime',
    key: 'lastLoginTime',
    width: 140,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 175,
    align: 'center',
  },
]);
const showClientRelation = (record: any) => {
  console.warn('here');
  clientRelationVisible.value = true;
};
const showRoleRelation = (record: any) => {
  console.warn('here');
  roleRelationVisible.value = true;
};
const showConfig = (record: any) => {
  console.warn('here');
  configVisible.value = true;
};
const closeClientRelation = () => {
  clientRelationVisible.value = false;
};
const closeRoleRelation = () => {
  roleRelationVisible.value = false;
};
const closeConfig = () => {
  configVisible.value = false;
};
const handleDelete = () => {
  message.success('删除成功');
};
</script>
<template>
  <div class="page-wrap">
    <div class="action-wrap">
      <a-space class="button-wrap">
        <a-button type="primary">新增</a-button>
      </a-space>
      <a-space class="search-wrap">
        <a-input style="width: 120px" v-model:value="params.keyword" />
        <a-button type="primary">搜索</a-button>
      </a-space>
    </div>
    <div class="content-wrap">
      <a-table :data-source="dataSource" :columns="columns">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column?.key === 'status'">
            <a-tag v-if="record.status === '0'" color="orange">
              未开始/进行中
            </a-tag>
            <a-tag v-else color="blue">已完成</a-tag>
          </template>
          <template v-if="column?.key === 'operation'">
            <div>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(TeamOutlined)"
                @click="showClientRelation(record)"
              >
                客户
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(ScheduleOutlined)"
                @click="showRoleRelation(record)"
              >
                角色
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(SettingOutlined)"
                @click="showConfig(record)"
              >
                配置
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(DeleteOutlined)"
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <UserClientRelation
      :open="clientRelationVisible"
      user-id="1"
      @close="closeClientRelation"
    />
    <UserRoleRelation
      :open="roleRelationVisible"
      user-id="1"
      @close="closeRoleRelation"
    />
    <UserConfig :open="configVisible" user-id="1" @close="closeConfig" />
  </div>
</template>
<style scoped></style>
